<!--
 描述: 左中
-->

<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">党员年龄分布</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="pd-main">
                        <div id="chart1" class="chart-1">
                            <div class="compass">
                                <div class="compass-bg-1"></div>
                                <div class="compass-bg-2"></div>
                                <div class="compass-bg-3"></div>
                                <div class="compass-bg-4"></div>
                                <div class="compass-bg-5"></div>
                                <!--<div class="compass-bg-6"></div>-->
                                <!--<div class="compass-bg-7"></div>-->

                                <div class="compass-bg-c-1"></div>
                                <div class="compass-bg-c-2"></div>
                                <div class="compass-bg-c-3"></div>
                                <div class="compass-bg-c-4"></div>

                                <div class="compass-text"
                                     :class="[`compass-text-${index + 1}`, {show: number == index}]"
                                     v-for="(item, index) in arr" :key="index">
                                    <span>{{ item.itemNum }}人</span>
                                </div>
                                <div class="compass-number">
                                    <div :title="`${index + 1}`"
                                         :class="[`rank-${index + 1}`, {szscale: number == index}]"
                                         v-for="(item, index) in arr" :key="index">
                                        <span>{{ item.workUnit }}</span>
                                    </div>
                                </div>

                                <div class="line-sx">
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                    <div class="line-fs"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import store from '../../../store/index'

    export default {
        name: "rainbow",
        data() {
            return {
                baseUrl: domain.testUrl,
                timer: null,
                number: null,
                arr: [],
                baseName: ':name'
            }
        },
        store,
        mounted() {
            setTimeout(() => {
                this.number = 0;
                this.initData();
            }, 4000);
            this.getEchart();
        },
        watch: {
            "$store.state.flag"(args) {
                this.arr = [];
                this.getEchart(args);
            }
        },
        methods: {
            getEchart(param) {


                if (param != undefined && param != null) {
                    this.baseUrl = localStorage.getItem('baseUrl');

                    this.baseName = param;
                }

                var url = this.baseUrl + "memberDatav/findMemberByAge?name=" + this.baseName;


                axios.post(url).then((response) => {

                    response.data.forEach((res) => {

                        this.arr.push({
                            workUnit: res.x,
                            itemNum: res.y
                        });
                    })

                }).catch(function (response) {
                    console.log(response); //发生错误时执行的代码
                });

            },
            initData() {
                this.number = this.number == this.arr.length ? 0 : this.number;
                this.timer = setTimeout(() => {
                    this.number++;
                    this.initData();
                }, 5000)
            }
        },
        beforeDestroy() {
            clearTimeout(this.timer);
        }
    };
</script>

<style lang="scss" scoped>
    .sn-container {
        left: 10px;
        top: 387px;
        width: 508px;
        height: 30%;
        .pd-main {
            position: absolute;
            height: 110%;
            width: 100%;
            [class^=chart] {
                position: absolute;
                -webkit-transform-origin: left top;
                -moz-transform-origin: left top;
                -ms-transform-origin: left top;
                -o-transform-origin: left top;
                transform-origin: left top;
            }
            .chart-1 {
                width: 500px;
                height: 260px;
                top: 55%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .compass {
                width: 100%;
                height: 100%;
                -webkit-transform: scale(0.9);
                -moz-transform: scale(0.9);
                -ms-transform: scale(0.9);
                -o-transform: scale(0.9);
                transform: scale(0.9);
                [class^=compass-bg-] {
                    position: absolute;
                    bottom: 0;
                }

                %compass-bg {
                    position: absolute;
                    bottom: 0px;
                    left: 50%;
                    -webkit-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
                    -moz-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
                    transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
                }
                .compass-bg-1 {
                    @extend %compass-bg;
                    margin-left: -250px;
                    bottom: -200px;
                    width: 500px;
                    height: 500px;
                    background: -webkit-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
                    background: -moz-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
                    background: -o-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
                    background: repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
                    display: none;
                }
                .compass-bg-2 {
                    @extend %compass-bg;
                    margin-left: -220px;
                    bottom: -170px;
                    width: 440px;
                    height: 440px;
                    background: -webkit-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
                    background: -moz-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
                    background: -o-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
                    background: repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
                    display: none;
                }
                .compass-bg-3 {
                    @extend %compass-bg;
                    margin-left: -190px;
                    bottom: -140px;
                    width: 380px;
                    height: 380px;
                    background: -webkit-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
                    background: -moz-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
                    background: -o-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
                    background: repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
                }
                .compass-bg-4 {
                    @extend %compass-bg;
                    margin-left: -160px;
                    bottom: -110px;
                    width: 320px;
                    height: 320px;
                    background: -webkit-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
                    background: -moz-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
                    background: -o-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
                    background: repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
                }
                .compass-bg-5 {
                    @extend %compass-bg;
                    margin-left: -130px;
                    bottom: -80px;
                    width: 260px;
                    height: 260px;
                    -webkit-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
                    -moz-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
                    box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
                }
                .compass-bg-6 {
                    @extend %compass-bg;
                    margin-left: -100px;
                    bottom: -50px;
                    width: 200px;
                    height: 200px;
                    background: -webkit-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
                    background: -moz-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
                    background: -o-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
                    background: repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
                    display: none;
                }
                .compass-bg-7 {
                    @extend %compass-bg;
                    margin-left: -70px;
                    bottom: -20px;
                    width: 140px;
                    height: 140px;
                    background: -webkit-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
                    background: -moz-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
                    background: -o-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
                    background: repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
                    -webkit-animation: bgshadow 3s linear infinite;
                    -moz-animation: bgshadow 3s linear infinite;
                    -o-animation: bgshadow 3s linear infinite;
                    animation: bgshadow 3s linear infinite;
                }

                .compass-bg-c-1 {
                    width: 100%;
                    height: 100%;
                    background: url(../../../assets/img/chart1/compass-bg-1.png) no-repeat 50% 345px;
                }
                .compass-bg-c-2 {
                    width: 100%;
                    height: 100%;
                    background: url(../../../assets/img/chart1/compass-bg-2.png) no-repeat 65% 146px;
                    opacity: 0.8;
                    -webkit-animation: fadebg 3s linear infinite;
                    -moz-animation: fadebg 3s linear infinite;
                    -o-animation: fadebg 3s linear infinite;
                    animation: fadebg 3s linear infinite;
                }
                .compass-bg-c-3 {
                    width: 100%;
                    height: 100%;
                    background: url(../../../assets/img/chart1/compass-bg-3.png) no-repeat 50% 227px;
                }
                .compass-bg-c-4 {
                    width: 100%;
                    height: 100%;
                    background: url(../../../assets/img/chart1/compass-bg-4.png) no-repeat 50% 63px;
                    -webkit-animation: numberfade 5s linear infinite;
                    -moz-animation: numberfade 5s linear infinite;
                    -o-animation: numberfade 5s linear infinite;
                    animation: numberfade 5s linear infinite;
                }

                .compass-text {
                    position: absolute;
                    overflow: hidden;
                    left: 50%;
                    margin-left: -60px;
                    font-size: 12px;
                    background-color: rgba(0, 71, 157, 0.4);
                    padding: 5px 10px;
                    color: #00c2ff;
                    -webkit-border-radius: 6px;
                    -moz-border-radius: 6px;
                    border-radius: 6px;
                    line-height: 1.5;
                    /*-webkit-transform: scale(0.8);
                    -moz-transform: scale(0.8);
                    -ms-transform: scale(0.8);
                    -o-transform: scale(0.8);
                    transform: scale(0.8);*/
                    display: none;
                    &.compass-text-1 {
                        top: -60px;
                        left: 85px;
                    }
                    &.compass-text-2 {
                        top: -35px;
                        left: 186px;
                    }
                    &.compass-text-3 {
                        top: -10px;
                        left: 287px;
                    }
                    &.compass-text-4 {
                        top: 15px;
                        left: 387px;
                    }
                    &.compass-text-5 {
                        top: 44px;
                        left: 487px;
                    }
                    &.compass-text-6 {
                        color: #d57a31;
                        bottom: -945px;
                        -webkit-animation-delay: 25s;
                        -moz-animation-delay: 25s;
                        -o-animation-delay: 25s;
                        animation-delay: 25s;
                    }
                    &.compass-text-7 {
                        color: #d57a31;
                        bottom: -1150px;
                        -webkit-animation-delay: 30s;
                        -moz-animation-delay: 30s;
                        -o-animation-delay: 30s;
                        animation-delay: 30s;
                    }
                    %span-nth-child {
                        margin-top: 0px;
                    }
                    span {
                        display: block;
                        &:nth-child(1) {
                            @extend %span-nth-child;
                        }
                        &:nth-child(2) {
                            @extend %span-nth-child;
                        }
                        &:nth-child(3) {
                            @extend %span-nth-child;
                        }
                    }
                    &.show {
                        display: block;
                    }
                }

                .compass-number {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    bottom: 50px;
                    > .szscale {
                        -webkit-transform: scale(1.2);
                        -moz-transform: scale(1.2);
                        -ms-transform: scale(1.2);
                        -o-transform: scale(1.2);
                        transform: scale(1.2);
                        -webkit-transform-origin: center bottom;
                        -moz-transform-origin: center bottom;
                        -ms-transform-origin: center bottom;
                        -o-transform-origin: center bottom;
                        transform-origin: center bottom;
                    }
                    > div {
                        position: absolute;
                        bottom: 0;
                        width: 55px;
                        height: 0;
                        -webkit-animation: sz 1s linear;
                        -moz-animation: sz 1s linear;
                        -o-animation: sz 1s linear;
                        animation: sz 1s linear;
                        -webkit-animation-fill-mode: forwards;
                        -moz-animation-fill-mode: forwards;
                        -o-animation-fill-mode: forwards;
                        animation-fill-mode: forwards;
                        -webkit-transition: 1s;
                        -o-transition: 1s;
                        -moz-transition: 1s;
                        transition: 1s;
                        &:nth-child(1) {
                            left: 5%;
                            color: #ff9232;
                            -webkit-animation-delay: 0s;
                            -moz-animation-delay: 0s;
                            -o-animation-delay: 0s;
                            animation-delay: 0s;
                            &:after {
                                -webkit-animation-delay: 0s;
                                -moz-animation-delay: 0s;
                                -o-animation-delay: 0s;
                                animation-delay: 0s;
                            }
                        }
                        &:nth-child(2) {
                            left: 25%;
                            color: #d5c245;
                            -webkit-animation-delay: 0.2s;
                            -moz-animation-delay: 0.2s;
                            -o-animation-delay: 0.2s;
                            animation-delay: 0.2s;
                            bottom: -10%;
                            &:after {
                                -webkit-animation-delay: 2.85s;
                                -moz-animation-delay: 2.85s;
                                -o-animation-delay: 2.85s;
                                animation-delay: 2.85s;
                            }
                        }
                        &:nth-child(3) {
                            left: 45%;
                            color: #01a455;
                            -webkit-animation-delay: 0.4s;
                            -moz-animation-delay: 0.4s;
                            -o-animation-delay: 0.4s;
                            animation-delay: 0.4s;
                            bottom: -20%;
                            &:after {
                                -webkit-animation-delay: 5.7s;
                                -moz-animation-delay: 5.7s;
                                -o-animation-delay: 5.7s;
                                animation-delay: 5.7s;
                            }
                        }
                        &:nth-child(4) {
                            left: 65%;
                            color: #85adfb;
                            -webkit-animation-delay: 0.6s;
                            -moz-animation-delay: 0.6s;
                            -o-animation-delay: 0.6s;
                            animation-delay: 0.6s;
                            bottom: -30%;
                            &:after {
                                -webkit-animation-delay: 8.55s;
                                -moz-animation-delay: 8.55s;
                                -o-animation-delay: 8.55s;
                                animation-delay: 8.55s;
                            }
                        }
                        &:nth-child(5) {
                            left: 85%;
                            color: #c36885;
                            -webkit-animation-delay: 0.8s;
                            -moz-animation-delay: 0.8s;
                            -o-animation-delay: 0.8s;
                            animation-delay: 0.8s;
                            bottom: -40%;
                            &:after {
                                -webkit-animation-delay: 11.4s;
                                -moz-animation-delay: 11.4s;
                                -o-animation-delay: 11.4s;
                                animation-delay: 11.4s;
                            }
                        }
                        &:nth-child(6) {
                            left: 75%;
                            color: #f674a0;
                            -webkit-animation-delay: 1s;
                            -moz-animation-delay: 1s;
                            -o-animation-delay: 1s;
                            animation-delay: 1s;
                            bottom: -50%;
                            &:after {
                                -webkit-animation-delay: 14.25s;
                                -moz-animation-delay: 14.25s;
                                -o-animation-delay: 14.25s;
                                animation-delay: 14.25s;
                            }
                        }
                        &:nth-child(7) {
                            left: 87.5%;
                            color: #275fcc;
                            -webkit-animation-delay: 1.2s;
                            -moz-animation-delay: 1.2s;
                            -o-animation-delay: 1.2s;
                            animation-delay: 1.2s;
                            bottom: -60%;
                            &:after {
                                -webkit-animation-delay: 17.1s;
                                -moz-animation-delay: 17.1s;
                                -o-animation-delay: 17.1s;
                                animation-delay: 17.1s;
                            }
                        }

                        span {
                            display: block;
                            width: 55px;
                            height: 55px;
                            line-height: 55px;
                            text-align: center;
                            /*padding-bottom: 55px;*/
                            -webkit-box-shadow: inset 0 0 15px currentColor;
                            -moz-box-shadow: inset 0 0 15px currentColor;
                            box-shadow: inset 0 0 15px currentColor;
                            -webkit-border-radius: 100%;
                            -moz-border-radius: 100%;
                            border-radius: 100%;
                        }
                        &:before {
                            content: "";
                            position: absolute;
                            height: 100%;
                            border-left: 1px dashed currentColor;
                            height: 500px;
                            top: 55px;
                            left: 50%;
                            margin-left: -1px;
                        }
                        &:after {
                            content: "NO." attr(title);
                            position: absolute;
                            display: inline-block;
                            top: -20px;
                            width: 100%;
                            font-family: "DIGITALDREAMFAT";
                            text-align: center;
                        }
                    }
                }

                .line-sx {
                    > div {
                        &:nth-child(2) {
                            height: 90%;
                            -webkit-animation-duration: 2s;
                            -moz-animation-duration: 2s;
                            -o-animation-duration: 2s;
                            animation-duration: 2s;
                            -webkit-animation-delay: 1.5s;
                            -moz-animation-delay: 1.5s;
                            -o-animation-delay: 1.5s;
                            animation-delay: 1.5s;
                            bottom: 0;
                            left: 51px;
                        }
                        &:nth-child(3) {
                            height: 100%;
                            -webkit-animation-duration: 3s;
                            -moz-animation-duration: 3s;
                            -o-animation-duration: 3s;
                            animation-duration: 3s;
                            -webkit-animation-delay: 0s;
                            -moz-animation-delay: 0s;
                            -o-animation-delay: 0s;
                            animation-delay: 0s;
                            bottom: 32px;
                            left: 89px;
                        }
                        &:nth-child(4) {
                            height: 100%;
                            -webkit-animation-duration: 2.5s;
                            -moz-animation-duration: 2.5s;
                            -o-animation-duration: 2.5s;
                            animation-duration: 2.5s;
                            -webkit-animation-delay: 1s;
                            -moz-animation-delay: 1s;
                            -o-animation-delay: 1s;
                            animation-delay: 1s;
                            bottom: 3px;
                            left: 179px;
                            -webkit-filter: hue-rotate(180deg);
                            filter: hue-rotate(180deg);
                        }
                        &:nth-child(5) {
                            height: 90%;
                            -webkit-animation-duration: 2s;
                            -moz-animation-duration: 2s;
                            -o-animation-duration: 2s;
                            animation-duration: 2s;
                            -webkit-animation-delay: 2s;
                            -moz-animation-delay: 2s;
                            -o-animation-delay: 2s;
                            animation-delay: 2s;
                            bottom: 42px;
                            left: 229px;
                        }
                        &:nth-child(6) {
                            height: 100%;
                            -webkit-animation-duration: 2.5s;
                            -moz-animation-duration: 2.5s;
                            -o-animation-duration: 2.5s;
                            animation-duration: 2.5s;
                            -webkit-animation-delay: 0.5s;
                            -moz-animation-delay: 0.5s;
                            -o-animation-delay: 0.5s;
                            animation-delay: 0.5s;
                            bottom: 11px;
                            right: 48px;
                        }
                        &:nth-child(7) {
                            height: 90%;
                            -webkit-animation-duration: 3s;
                            -moz-animation-duration: 3s;
                            -o-animation-duration: 3s;
                            animation-duration: 3s;
                            -webkit-animation-delay: 2.5s;
                            -moz-animation-delay: 2.5s;
                            -o-animation-delay: 2.5s;
                            animation-delay: 2.5s;
                            bottom: -22px;
                            right: 174px;
                            -webkit-filter: hue-rotate(180deg);
                            filter: hue-rotate(180deg);
                        }
                        &:nth-child(8) {
                            height: 90%;
                            -webkit-animation-duration: 3s;
                            -moz-animation-duration: 3s;
                            -o-animation-duration: 3s;
                            animation-duration: 3s;
                            -webkit-animation-delay: 1.5s;
                            -moz-animation-delay: 1.5s;
                            -o-animation-delay: 1.5s;
                            animation-delay: 1.5s;
                            bottom: -22px;
                            right: 100px;
                        }
                        &:nth-child(9) {
                            height: 100%;
                            -webkit-animation-duration: 2.5s;
                            -moz-animation-duration: 2.5s;
                            -o-animation-duration: 2.5s;
                            animation-duration: 2.5s;
                            -webkit-animation-delay: 2s;
                            -moz-animation-delay: 2s;
                            -o-animation-delay: 2s;
                            animation-delay: 2s;
                            bottom: -10px;
                            right: 220px;
                        }
                        &:nth-child(10) {
                            height: 95%;
                            -webkit-animation-duration: 2s;
                            -moz-animation-duration: 2s;
                            -o-animation-duration: 2s;
                            animation-duration: 2s;
                            -webkit-animation-delay: 1s;
                            -moz-animation-delay: 1s;
                            -o-animation-delay: 1s;
                            animation-delay: 1s;
                            bottom: -41px;
                            right: 182px;
                        }
                    }
                    .line-fs {
                        width: 14px;
                        height: 100%;
                        background: url(../../../assets/img/chart1/line-fs.png) no-repeat;
                        background-position: 50% 150%;
                        position: absolute;
                        z-index: -1;
                        -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
                        -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
                        -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
                        animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
                    }
                }

            }

        }
    }

    @-webkit-keyframes fs {
        0% {
            background-position: 50% 150%;
        }
        50% {
            background-position: 50% -132%;
        }
        100% {
            background-position: 50% -264%;
            opacity: 0;
        }
    }

    @-moz-keyframes fs {
        0% {
            background-position: 50% 150%;
        }
        50% {
            background-position: 50% -132%;
        }
        100% {
            background-position: 50% -264%;
            opacity: 0;
        }
    }

    @-o-keyframes fs {
        0% {
            background-position: 50% 150%;
        }
        50% {
            background-position: 50% -132%;
        }
        100% {
            background-position: 50% -264%;
            opacity: 0;
        }
    }

    @keyframes fs {
        0% {
            background-position: 50% 150%;
        }
        50% {
            background-position: 50% -132%;
        }
        100% {
            background-position: 50% -264%;
            opacity: 0;
        }
    }

    @-webkit-keyframes bgshadow {
        0%, 100% {
            -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        }
        50% {
            -webkit-box-shadow: 0 0 30em white;
            box-shadow: 0 0 30em white;
        }
    }

    @-moz-keyframes bgshadow {
        0%, 100% {
            -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        }
        50% {
            -moz-box-shadow: 0 0 30em white;
            box-shadow: 0 0 30em white;
        }
    }

    @-o-keyframes bgshadow {
        0%, 100% {
            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        }
        50% {
            box-shadow: 0 0 30em white;
        }
    }

    @keyframes bgshadow {
        0%, 100% {
            -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
            -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        }
        50% {
            -webkit-box-shadow: 0 0 30em white;
            -moz-box-shadow: 0 0 30em white;
            box-shadow: 0 0 30em white;
        }
    }

    @-webkit-keyframes sz {
        0% {
            height: 0;
        }
        100% {
            height: 70%;
        }
    }

    @-moz-keyframes sz {
        0% {
            height: 0;
        }
        100% {
            height: 70%;
        }
    }

    @-o-keyframes sz {
        0% {
            height: 0;
        }
        100% {
            height: 70%;
        }
    }

    @keyframes sz {
        0% {
            height: 0;
        }
        100% {
            height: 70%;
        }

    }
</style>
